import React, { useState, useEffect, useCallback } from 'react';
import { Card, Row, Col, Typography, Button, Spin } from 'antd';
import { 
  LoginOutlined,
  UserOutlined,
  BookOutlined,
  TeamOutlined,
  RobotOutlined,
  CloudOutlined
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import LoginModal from '../components/LoginModal';
import InitializationProgress from '../components/InitializationProgress';
import { useAuth } from '../store/AuthContext';
import './Dashboard.css';

const { Title, Text } = Typography;

const LoginPage: React.FC = () => {
  const [loginModalVisible, setLoginModalVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [showInitialization, setShowInitialization] = useState(false);
  const { user, isAuthenticated, isInitializing } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    // 如果已经登录且当前在登录页面，跳转到dashboard
    if (isAuthenticated && location.pathname === '/login') {
      navigate('/dashboard');
    }
  }, [isAuthenticated, navigate, location.pathname]);

  const handleLoginSuccess = () => {
    console.log('登录成功，开始显示初始化进度条');
    setLoginModalVisible(false);
    setShowInitialization(true);
  };

  const handleInitializationComplete = useCallback(() => {
    setShowInitialization(false);
    navigate('/dashboard');
  }, [navigate]);

  // 渲染加载动画
  if (loading) {
    return (
      <div style={{
        position: 'fixed',
        top: 0, left: 0, right: 0, bottom: 0,
        background: 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 9999
      }}>
        {/* Logo动画容器 */}
        <div style={{
          width: 120, height: 120,
          background: 'rgba(255, 255, 255, 0.1)',
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginBottom: 30,
          backdropFilter: 'blur(10px)',
          animation: 'pulse 2s ease-in-out infinite'
        }}>
          <div style={{
            fontSize: '48px',
            animation: 'spin 1s linear infinite'
          }}>
            📚
          </div>
        </div>
        
        {/* 品牌标题 */}
        <Title level={2} style={{ color: 'white', marginBottom: 16, fontWeight: 'bold', textAlign: 'center' }}>LinkMate</Title>
        
        {/* 友好提示 */}
        <Text style={{ color: 'white', fontSize: '16px', marginBottom: 20 }}>正在进行系统初始化...</Text>
        
        {/* 加载指示器 */}
        <Spin size="large" style={{ color: 'white' }} />
      </div>
    );
  }

  console.log('LoginPage render - showInitialization:', showInitialization);
  
  return (
    <>
      {/* 初始化进度条 */}
      <InitializationProgress 
        visible={showInitialization} 
        onComplete={handleInitializationComplete} 
      />
      
      <div style={{
        minHeight: '100vh',
        background: 'linear-gradient(135deg, #1890ff 0%, #40a9ff 100%)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '20px',
        position: 'relative',
        overflow: 'hidden'
      }}>
        {/* 波浪动画背景 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%, transparent 100%)',
          animation: 'wave 4s ease-in-out infinite',
          zIndex: 1
        }} />
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.15) 60%, rgba(255,255,255,0.05) 90%, transparent 100%)',
          animation: 'wave2 5s ease-in-out infinite',
          zIndex: 1
        }} />
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.18) 40%, rgba(255,255,255,0.08) 60%, transparent 80%)',
          animation: 'wave3 6s ease-in-out infinite',
          zIndex: 1
        }} />

        <Row gutter={[40, 40]} style={{ width: '100%', maxWidth: '1200px', zIndex: 2 }}>
          {/* 左侧产品介绍 */}
          <Col xs={24} lg={14}>
            <div style={{ 
              display: 'grid', 
              gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', 
              gap: '20px',
              marginBottom: '30px'
            }}>
              {/* 产品特色卡片 */}
              <Card style={{ 
                background: 'rgba(255, 255, 255, 0.1)', 
                backdropFilter: 'blur(10px)',
                border: '1px solid rgba(255, 255, 255, 0.2)',
                borderRadius: '15px'
              }}>
                <div style={{ textAlign: 'center', color: 'white' }}>
                  <div style={{ fontSize: '32px', marginBottom: '10px' }}>🎯</div>
                  <Title level={4} style={{ color: 'white', marginBottom: '8px' }}>专注模式</Title>
                  <Text style={{ color: 'rgba(255, 255, 255, 0.8)' }}>番茄计时器，提升学习效率</Text>
                </div>
              </Card>

              <Card style={{ 
                background: 'rgba(255, 255, 255, 0.1)', 
                backdropFilter: 'blur(10px)',
                border: '1px solid rgba(255, 255, 255, 0.2)',
                borderRadius: '15px'
              }}>
                <div style={{ textAlign: 'center', color: 'white' }}>
                  <div style={{ fontSize: '32px', marginBottom: '10px' }}>📚</div>
                  <Title level={4} style={{ color: 'white', marginBottom: '8px' }}>学习规划</Title>
                  <Text style={{ color: 'rgba(255, 255, 255, 0.8)' }}>智能规划，科学安排学习</Text>
                </div>
              </Card>

              <Card style={{ 
                background: 'rgba(255, 255, 255, 0.1)', 
                backdropFilter: 'blur(10px)',
                border: '1px solid rgba(255, 255, 255, 0.2)',
                borderRadius: '15px'
              }}>
                <div style={{ textAlign: 'center', color: 'white' }}>
                  <div style={{ fontSize: '32px', marginBottom: '10px' }}>🤖</div>
                  <Title level={4} style={{ color: 'white', marginBottom: '8px' }}>AI交流</Title>
                  <Text style={{ color: 'rgba(255, 255, 255, 0.8)' }}>智能助手，个性化学习指导</Text>
                </div>
              </Card>

              <Card style={{ 
                background: 'rgba(255, 255, 255, 0.1)', 
                backdropFilter: 'blur(10px)',
                border: '1px solid rgba(255, 255, 255, 0.2)',
                borderRadius: '15px'
              }}>
                <div style={{ textAlign: 'center', color: 'white' }}>
                  <div style={{ fontSize: '32px', marginBottom: '10px' }}>👥</div>
                  <Title level={4} style={{ color: 'white', marginBottom: '8px' }}>好友系统</Title>
                  <Text style={{ color: 'rgba(255, 255, 255, 0.8)' }}>学习伙伴，共同进步</Text>
                </div>
              </Card>
            </div>

            {/* 为什么选择LinkMate */}
            <Card style={{ 
              background: 'rgba(255, 255, 255, 0.1)', 
              backdropFilter: 'blur(10px)',
              border: '1px solid rgba(255, 255, 255, 0.2)',
              borderRadius: '15px'
            }}>
              <Title level={3} style={{ color: 'white', textAlign: 'center', marginBottom: '20px' }}>
                为什么选择LinkMate？
              </Title>
              <div style={{ color: 'rgba(255, 255, 255, 0.9)' }}>
                <div style={{ marginBottom: '12px' }}>✨ 个性化学习规划，科学安排时间</div>
                <div style={{ marginBottom: '12px' }}>🎯 专注模式，提升学习效率</div>
                <div style={{ marginBottom: '12px' }}>🤖 AI智能助手，24小时在线指导</div>
                <div style={{ marginBottom: '12px' }}>👥 好友系统，学习不再孤单</div>
                <div style={{ marginBottom: '12px' }}>☁️ 云端存储，资料永不丢失</div>
                <div>📈 职业规划，为未来铺路</div>
              </div>
            </Card>
          </Col>

          {/* 右侧登录区域 */}
          <Col xs={24} lg={10}>
            <div style={{ 
              display: 'flex', 
              flexDirection: 'column', 
              alignItems: 'center',
              justifyContent: 'center',
              minHeight: '500px'
            }}>
              {/* Logo */}
              <div style={{
                width: 100,
                height: 100,
                background: 'rgba(255, 255, 255, 0.1)',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginBottom: 30,
                backdropFilter: 'blur(10px)',
                border: '2px solid rgba(255, 255, 255, 0.2)',
                boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)'
              }}>
                <div style={{
                  fontSize: '48px',
                  animation: 'float 3s ease-in-out infinite'
                }}>
                  📚
                </div>
              </div>

              {/* 品牌标题 */}
              <Title level={1} style={{ 
                color: 'white', 
                marginBottom: 16, 
                fontWeight: 'bold',
                textAlign: 'center',
                textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)'
              }}>
                LinkMate
              </Title>

              {/* 副标题 */}
              <Text style={{ 
                color: 'rgba(255, 255, 255, 0.8)', 
                fontSize: '18px', 
                marginBottom: 40,
                textAlign: 'center',
                textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)'
              }}>
                您的智能学习伙伴
              </Text>

              {/* 登录按钮 */}
              <Button
                type="primary"
                size="large"
                icon={<LoginOutlined />}
                onClick={() => setLoginModalVisible(true)}
                style={{
                  height: '60px',
                  padding: '0 50px',
                  fontSize: '18px',
                  fontWeight: 'bold',
                  background: 'linear-gradient(135deg, #1e3a8a, #3b82f6)',
                  border: 'none',
                  borderRadius: '30px',
                  boxShadow: '0 8px 25px rgba(30, 58, 138, 0.4)',
                  transition: 'all 0.3s ease',
                  textShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
                  letterSpacing: '1px'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'translateY(-3px) scale(1.05)';
                  e.currentTarget.style.boxShadow = '0 12px 30px rgba(30, 58, 138, 0.6)';
                  e.currentTarget.style.background = 'linear-gradient(135deg, #1e40af, #2563eb)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'translateY(0) scale(1)';
                  e.currentTarget.style.boxShadow = '0 8px 25px rgba(30, 58, 138, 0.4)';
                  e.currentTarget.style.background = 'linear-gradient(135deg, #1e3a8a, #3b82f6)';
                }}
              >
                🚀 立即登录
              </Button>
              
            </div>
          </Col>
        </Row>
      </div>

      {/* 登录弹窗 */}
      <LoginModal
        visible={loginModalVisible}
        onCancel={() => setLoginModalVisible(false)}
        onSuccess={handleLoginSuccess}
      />
    </>
  );
};

export default LoginPage;